<template>
  <div class="cardBox">
    <div class="userCount">
      <div class="item">
        <div class="count">{{ totalData.todayVisits }}</div>
        <div class="label">
          今日访问量
          <div class="increase">
            <img
              class="img"
              src="@/assets/icon/increase.png"
              alt=""
              srcset=""
            />
            {{ totalData.visitsDayRate }}%较昨日
          </div>
        </div>
      </div>
      <div class="item">
        <div class="count">{{ totalData.todayCount }}</div>
        <div class="label">
          当日新增用户
          <div class="increase">
            <img
              class="img"
              src="@/assets/icon/increase.png"
              alt=""
              srcset=""
            />
            {{ totalData.countDayRate }}%较昨日
          </div>
        </div>
      </div>
      <div class="item">
        <div class="count">{{ totalData.visits }}</div>
        <div class="label">总访问量</div>
      </div>
      <div class="item">
        <div class="count">{{ totalData.total }}</div>
        <div class="label">全部用户</div>
      </div>
    </div>
    <div class="chartMain">
      <div class="chartItem">
        <div class="title">用户访问情况</div>
        <div class="timeRange">
          <el-radio-group
            v-model="timeTap"
            size="small"
            @input="timeRadioChange"
          >
            <el-radio-button label="today">今天</el-radio-button>
            <el-radio-button label="lately7">近七天</el-radio-button>
            <el-radio-button label="month">近一个月</el-radio-button>
            <el-radio-button label="year">近一年</el-radio-button>
          </el-radio-group>
          <el-date-picker
            size="small"
            v-model="filterParams.timeRange"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :editable="false"
            @change="timeChange"
            value-format="yyyy-MM-dd"
          />
        </div>
        <div id="lineEcharts"></div>
      </div>
      <div class="chartItem">
        <div class="title">用户渠道来源占比</div>
        <div class="content">
          <div id="pieEcharts"></div>
          <div class="des">
            <div class="desItem" v-for="(item, index) in typeData" :key="index">
              <div 
                
                class="label"
                :style="{ backgroundColor: color[index] }"
              ></div>
              <div class="value" >
                <div class="rate">
                  {{ loginType[item.channel]
                  }}<span class="num">{{ item.ratio }}</span>
                </div>
                <span>{{ item.num }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  getMemberOverview,
  getMemberLineCharts,
  getMemberPieCharts,
} from "@/api/customer";
export default {
  props: {
    dataSource: { type: Object, default: {} },
  },
  data() {
    return {
      timeRange: "",
      radio: 3,
      totalData: {},
      color: ["#36CBCB", "#3AA1FF", "#4ECB73", "#FBD437", "#F04864", "#975FE5"],
      typeData: [],
      loginType: {
        h5: "h5",
        wechat: "公众号",
        routine: "小程序",
        iosWx: "APP",
        androidWx: "APP",
        tiktok: "抖音小程序",
      },
      filterParams: {},
      timeTap: "lately7",
    };
  },
  async mounted() {
    await this.getChartData();
    this.initPieCharts();
    this.initLineCharts();
  },
  methods: {
    timeRadioChange(e) {
      if (e) {
        this.timeRange = e;
        this.filterParams = {};
        this.initLineCharts();
      }
    },
    async getChartData() {
      let res = await getMemberOverview();
      this.totalData = res.data;
    },
    async initPieCharts() {
      var chartDom = document.getElementById("pieEcharts");
      var myChart = echarts.init(chartDom);
      let res = await getMemberPieCharts();
      res.data.forEach((element) => {
        element.value = element.num;
      });
      this.typeData = res.data
      let option = {
        title: {
          text: "用户数", //主标题文本
          subtext: this.totalData.total, //副标题文本
          left: "center",
          top: "43%",
          textStyle: {
            fontSize: 20,
            color: "#666666",
            align: "center",
          },
          subtextStyle: {
            fontFamily: "Arial, Verdana, sans...",
            fontSize: 12,
            fontStyle: "normal",
            fontWeight: "normal",
            color: "#000000",
          },
          zlevel: 0,
          z: 6,
        },
        color: this.color,
        center: ["1%", "50%"],
        tooltip: false,
        legend: {
          orient: "horizontal",
          x: 10,
          backgroundColor: "rgba(0,0,0,0)",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 100,
            },
            label: {
              normal: {
                show: false,
              },
            },
            legend: {
              itemGap: 1000,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.typeData,
            gap: 100,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    async initLineCharts() {
      var chartDom = document.getElementById("lineEcharts");
      var myChart = echarts.init(chartDom);

      let res = await getMemberLineCharts({
        dateLimit: this.timeRange,
      });
      let time = [];
      let count = [];
      let visit = [];
      let now = new Date();
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      Object.keys(res.data.count).map((item, index) => {
        if (this.timeRange == "month") {
          time.push(item);
          if (item > Number(day)) return;
          count.push(res.data.count[item]);
          visit.push(res.data.visit[item]);
        } else if (this.timeRange == "today") {
          let number = index + 1 >= 10 ? index + 1 : "0" + (index + 1);
          time.push(number);

          if (index > hours) return;
          count[index] = res.data.count[number];
          visit[index] = res.data.visit[number];
        } else {
          time.push(String(item));
          count.push(res.data.count[item]);
          visit.push(res.data.visit[item]);
        }
      });
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: false,
        color: ["#2FC25B", "#108EE9"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          splitNumber: time.length,
          data: time,
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          min: 0,
        },
        series: [
          {
            name: "访问数",
            type: "line",
            data: visit,
            smooth: true,
          },
          {
            name: "新增用户数",
            type: "line",
            data: count,
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    timeChange(e) {
      this.timeTap = null;
      this.timeRange = e[0] + "," + e[1];
      this.initLineCharts();
    },
  },
};
</script>

<style lang="scss" scoped>
.cardBox {
  margin-top: 10px;
  .userCount {
    margin-top: 100px;
    display: flex;
    flex: 1;
    justify-content: space-between;
    padding: 0 100px;
    .item {
      width: 22%;
      border-radius: 3px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 50px 0;
      font-size: 32px;
      flex-wrap: wrap;
      .count {
        width: 100%;
        text-align: center;
        color: #9d6bed;
      }
      .label {
        position: relative;
        font-size: 16px;
        margin-top: 5px;
        .increase {
          position: absolute;
          top: 0px;
          left: 100%;
          width: 120px;
          margin-left: 5px;
          font-size: 15px;
          color: rgb(235, 87, 77);
          font-weight: bold;
          .img {
            width: 18px;
            vertical-align: bottom;
          }
        }
      }
    }
  }
  .chartMain {
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    .chartItem {
      padding: 20px 15px;
      width: 60%;
      background-color: #fff;
      border-radius: 3px;

      &:last-child {
        width: 39%;
      }
      .title {
        position: relative;
        padding-left: 12px;
        font-weight: bold;
        margin-bottom: 20px;
        &::before {
          position: absolute;
          top: 50%;
          content: "";
          left: 0;
          width: 4px;
          height: 15px;
          border-radius: 2px;
          background-color: #409eff;
          transform: translateY(-50%);
        }
      }
      .timeRange {
        display: flex;
        align-items: center;
        margin-left: 30px;
        margin-right: 10px;
        justify-content: flex-end;
        /deep/ .el-input__inner {
          height: 36px;
          margin-right: 10px;
        }
        /deep/ .el-radio {
          margin-right: 15px;
        }
        /deep/ .el-radio-group {
          margin-right: 15px;
        }
      }
      .content {
        display: flex;
        align-items: center;
        .des {
          min-width: 200px;
          border-radius: 3px;
          padding: 20px 10px;
          background-color: rgba(61, 155, 248, 0.1);
          align-items: center;
          .desItem {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            &:last-child {
              margin-bottom: 0px;
            }
          }
          .label {
            display: inline-block;
            width: 24px;
            height: 13px;
            border-radius: 2px;
            margin-right: 10px;
            background-color: #9d6bed;
          }
          .value {
            display: flex;
            font-size: 14px;
            flex: 1;

            justify-content: space-between;
            .num {
              color: #999;
              font-size: 12px;
              padding-left: 5px;
              border-left: 1px solid #ccc;
              margin-left: 10px;
            }
          }
        }
      }
      #pieEcharts {
        flex: 1;
        height: 400px;
      }
      #lineEcharts {
        width: 100%;
        height: 400px;
      }
    }

    .userNumber {
      padding: 0 30px;
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;
      gap: 10px;
      .boxItem {
        padding: 20px 20px;
        flex: 1;
        box-shadow: 0 0.02rem 0.37rem 0 #efefef;
        .label {
          color: #999;
        }
        .value {
          font-size: 20px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
